<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      img{width: 300px;}
    </style>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <Banner :img="imgList">
        <template #btn>
          <span>做</span>
          <span>有</span>
        </template>
        <template #page>
          <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
        </template>
      </Banner>
      <p>导航</p>
      <Banner :img="imgList"></Banner>
    </div>
	</body>
  <template id="temp">
    <div class="banner">
      <div class="imgbox">
        <img v-for="(item,idx) in img" :src="item.img" :alt="item.alt" :title="item.title" :key="idx" />
      </div>
      <div class="btns">
        <p>以下是按钮</p>
        <slot name="btn">
          <button>左</button>
          <button>右</button>
        </slot>
        <p>以上是按钮</p>
      </div>
      <div class="list">
        <p>以下是分页指示器</p>
        <slot name="page">
          <em>1</em>
          <em>2</em>
          <em>3</em>
          <em>4</em>
        </slot>
        <p>以上是分页指示器</p>
      </div>
    </div>
  </template>
  <script src="../vue.js"></script>
  <script>
    var banner = {
      template: "#temp",
      props: ['img'],
      data () {
        return {
          index: 0
        }
      },
      methods: {
        left () {
          this.index--
          this.renderImg()
        },
        right () {
          this.index++
          this.renderImg()
        },
        renderImg () {
          console.log('这是子组件内部：' + this.index)
          this.$emit('getBannerIndex', this.index)
        }
      },
    }
    
    
    new Vue({
      el:"#app",
      data:{
        title:"正在测试组件开发",
        imgList:[{
          img:"http://106.15.41.34:3000/uploads/0882baae5aa3e2d82d0fcbc2b452d89c-banner4.jpg",
          alt:"1",
          title:"1"
        },{
          img:"http://106.15.41.34:3000/uploads/8ace6bf18e6d7aa054c59309a0015424-banner3.jpg",
          alt:"2",
          title:"2"
        }]
      },
      components:{
        Banner:banner
      }
    })
  </script>
</html>
